---
title: Tilbakemelding
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

Indikerer fremdrift eller nedtelling og beveger seg fra høyre til venstre.

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| <span>Egenskaper</span> | Type                 | Beskrivelse                                                                          | Standard  |
| ----------------------- | -------------------- | ------------------------------------------------------------------------------------ | --------- |
| varighet                | nummer               | Den totale varigheten av fremdriftslinjen animasjon i millisekunder                  | 3         |
| Forsinkelse             | nummer               | Forsinkelsen ved start av fremdriftslinjen animasjon i millisekunder                 | 0         |
| utjevning               | <span>streng</span>  | Utjevningsfunksjon for fremdriftslinje animasjon                                     | easeInOut |
| stangHøyde              | nummer               | Høyden på stangen i piksler                                                          | 24        |
| linjeFarge              | <span>streng</span>  | Fargen på stangen                                                                    | grå80     |
| autoStart               | <span>boolean</span> | Hvis `true`, starter fremdriftslinje animasjonen automatisk når komponenten monteres | `sant`    |

</Tab>
</Tabs>

## Sirkulær fremdriftslinje

Indikerer fremdriften av en oppgave, ofte brukt i ladingsskjermer eller områder hvor du vil kommunisere pågående prosesser til brukeren.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| <span>Egenskaper</span> | Type                | Beskrivelse                                  | Standard       |
| ----------------------- | ------------------- | -------------------------------------------- | -------------- |
| størrelse               | nummer              | Størrelsen på den sirkulære fremdriftslinjen | 50             |
| linjeBredde             | nummer              | Bredden på fremdriftslinjen                  | 5              |
| linjeFarge              | <span>streng</span> | Fargen på fremdriftslinjen                   | gjeldendeFarge |

</Tab>

</Tabs>
